<template>
	<view class="content">
		<u-form :model="form" ref="uForm">
			<view class="bgf">
				<u-form-item label-width="160rpx" label="商品标题">
					<u-input :disabled="canEdit" v-model="form.goods_name"/>
				</u-form-item>
				<u-form-item label-width="160rpx" label="商品描述">
					<u-input :disabled="canEdit" v-model="form.goods_jingle" type="textarea"/>
				</u-form-item>
				<u-form-item label-width="160rpx" label="商品图片"  prop="image">
					<u-radio-group :disabled="canEdit" v-model="iType" @change="radioGroupChange">
						<u-radio 
							v-for="(item, index) in typeList" :key="index" 
							:name="item.type"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<block v-if="iType == 2">
					<u-form-item label-width="160rpx" label="上传图片">
						<view class="pic">
							<ss-upload-image
								:url="url"
								:file-list="form.goods_image"
								@on-success="onSuccess"
								@on-error="onError"
								@on-remove="onRemove"
								@on-process="onProcess"
							></ss-upload-image>
						</view>
					</u-form-item>
				</block>
				<block v-if="iType == 3">
					<u-form-item label-width="160rpx" label="上传视频"  prop="video">
						<view class="video-box" v-if="videoUrl">
							<view class="icon-close" @click.stop="remove">
								<image src="/static/close1.png" mode="widthFix" class="icon"></image>
							</view>
							<!-- #ifdef MP-WEIXIN | H5 -->
								<video :src="videoUrl" controls style="width: 400rpx;height: 300rpx;"></video>
							<!-- #endif -->
							<!-- #ifdef APP -->
								<dom-video
									ref="domVideo"
									:src="videoUrl" controls style="width: 400rpx;height: 300rpx;"
								/>
							
							<!-- #endif -->
						</view>
						<image src="/static/add7.png" mode="aspectFill" class="face" v-else @tap="upVideo"></image>
					</u-form-item>
				</block>
				<u-form-item label-width="160rpx" label="商品分类" >
					<u-input :disabled="canEdit" v-model="selectVal" type="select"  placeholder="请选择分类"  @tap="showT"/>
				</u-form-item>
				<u-form-item label-width="160rpx" label="出售价格">
					<view class="name-box">
						<view class="flex" v-for="(item,index) in form.level" :key="index">
							<block  v-if="item.level_name">
								<text class="p1">
									{{item.level_name}}
								</text> 
								<u-input :disabled="canEdit"  placeholder="请输入出售价格" v-model="item.goods_price"/> 
								<text class="p2">元</text>
							</block>
						</view>
					</view>
				</u-form-item>
				<u-form-item label-width="160rpx" label="价格">
					<view class="flex">
						<u-input :disabled="canEdit" placeholder="请输入价格" v-model="form.goods_price"/> <text class="p2">元</text>
					</view>
				</u-form-item>
				<u-form-item label-width="160rpx" label="市场价">
					<view class="flex">
						<u-input :disabled="canEdit" placeholder="请输入市场价" v-model="form.goods_marketprice"/> <text class="p2">元</text>
					</view>
				</u-form-item>
				<u-form-item label-width="160rpx" label="库存">
					<view class="flex">
						<u-input :disabled="canEdit" placeholder="请输入库存" v-model="form.goods_storage"/> <text class="p2"></text>
					</view>
				</u-form-item>
				<u-form-item label-width="160rpx" label="运费">
					<view class="flex">
						<u-input :disabled="canEdit" placeholder="请输入运费" value="0.00" v-model="form.goods_freight"/> <text class="p2"></text>
					</view>
				</u-form-item>
				<u-form-item label-width="160rpx" label="虚拟商品"  prop="image">
					<u-radio-group :disabled="canEdit"  v-model="form.is_virtual" @change="radioGroupChange">
						<u-radio 
							name="1"
						>
							是
						</u-radio>
						<u-radio
							name="0"
						>
							否
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label-width="160rpx" label="排序"  prop="image">
					<u-input :disabled="canEdit"  placeholder="数字越小越靠前" v-model="form.goods_sort"/> <text class="p2"></text>
				</u-form-item>
				<u-form-item label-width="160rpx" label="是否新品"  prop="image">
					<u-radio-group :disabled="canEdit"  v-model="form.is_new" @change="radioGroupChange">
						<u-radio 
							name="1"
						>
							是
						</u-radio>
						<u-radio
							name="0"
						>
							否
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label-width="160rpx" label="是否推荐"  prop="image">
					<u-radio-group :disabled="canEdit"  v-model="form.goods_commend" @change="radioGroupChange">
						<u-radio 
							name="1"
						>
							是
						</u-radio>
						<u-radio
							name="0"
						>
							否
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label-width="160rpx" label="商品状态"  prop="image">
					<view>
						<u-radio-group :disabled="canEdit"  v-model="form.goods_state" @change="radioGroupChange">
							<u-radio 
								name="1"
							>
								正常
							</u-radio>
							<u-radio
								name="0"
							>
								禁用
							</u-radio>
						</u-radio-group>
						
						<view class="gray">被禁用的商品不会在前台显示</view>
					</view>
				</u-form-item>
			</view>
			<u-select v-model="show" :list="cateList" label-name="gc_name" value-name="gc_id" @confirm="selectValue"></u-select>
			<!-- <view class="container" style="margin-top: 60rpx;padding: 0 40rpx 40rpx;">
				<view class="btn" @tap="submit">
					提交审核
				</view>
			</view> -->
		</u-form>
	</view>
</template>


<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import ssUploadImage from '@/components/ss-upload-image/ss-upload-image.vue';
	import config from '@/config/config.js';
	import domVideo from '@/components/ls-dom-video/ls-dom-video.vue';
	import {goods_list,goods_category,inventory,storage,seller_list,detail} from '@/config/user/api.js';
	export default {
		data() {
			return {
				canEdit:true,
				imgjs:'',
				more_img:[],
				fileList: [],
				name: 'file',
				id:'',
				feedback:'',
				url: config.baseUrl + '/api/upload/image',
				type:1,
				form:{
					goods_name:'',
					goods_image: [],
					goods_jingle:'',
					level: [],
					goods_price:'',
					goods_storage:'',
					goods_freight:'',
					is_virtual:'',
					goods_sort:'',
					is_new:'',
					goods_commend:'',
					goods_state:'',
					goods_marketprice:'',
				},
				show:false,
				list: [],
				selectVal:'',
				typeList: [
					{
						name: '图片',
						type:2,
					},
				],
				iType: 2,
				videoUrl:'',
				cid:'',
				edit: null,
				cateList:[],
			}
		},
		
		onLoad(o) {
			if (o.goods_id) {
			    this.goods_id = o.goods_id;
				this.getInfo();
			};
			this.getCate();
		},
		components: {
			ssUploadImage,domVideo
		},
		created() {
			let that = this;
			const token = uni.getStorageSync('token');
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				uni.uploadFile({
					url: that.url,
					filePath: path,
					name: 'file',
					header: {
						token,
						// 'content-type': 'multipart/form-data'  
					},
					// formData: {
					// 	file:'file',
					// },
					success: async (res) => {
						console.log(res);
						var jsarr = JSON.parse(res.data);
						console.log(jsarr)
						that.form.image = jsarr.data.uri;
					},
					fail: function(res) {
						console.log(res);
					}
				});
				
			})
		},
		onShareAppMessage: function() {},
		computed: {
		    ...mapState({
		        userInfo: 'userInfo',
				imgGroup:'imgGroup',
				newGroup:'newGroup',
		    })
		},
		methods: {
			async getInfo(){
				const that = this;
				let paramData = {
					goods_id:that.goods_id,
				};
				const res = await detail(paramData);
				if (res.code != 1) {
					that.$common.showTip(res.msg, 'none')
					return
				};
				let info = res.data;
				that.form = {
					goods_name: info.goods_name,
					goods_image: ['https://www.jiumeifu.cc' + info.goods_image],
					level: info.level,
					goods_price: info.goods_price,
					goods_marketprice:info.goods_marketprice,
					goods_storage: info.goods_storage,
					goods_jingle: info.goods_common.goods_jingle,
					goods_freight: info.goods_common.goods_freight,
					is_virtual: info.goods_common.is_virtual,
					goods_sort: info.goods_common.goods_sort,
					is_new: info.goods_common.is_new,
					goods_commend: info.goods_common.goods_commend,
					goods_state: info.goods_common.goods_state,
				};
				console.log(that.form);
			},
			
			async getCate(){
				const that = this;
				const res = await goods_category();
				if (res.code != 1) {
					if(res.code == 51003) return
					that.$common.showTip(res.msg, 'none')
					return
				};
				this.cateList = res.data;
			},
			// 编辑器初始化完毕，返回edit对象
			editReady(edit) {
				// 将富文本对象存放到当前页面，便于后续直接操作
				this.edit = edit;
			},
			selectValue(e) {
				console.log(e);
				this.cid = e[0].value;
				this.selectVal = e[0].label;
			},
			radioGroupChange(e){
				console.log(e);
			},
			async submit(){
				const that = this;
				let paramData = that.form;
			},
			// 上传成功
			onSuccess(res) {
				console.log(res)
				if (res.code === 1) {
					this.fileList.push(res.data.uri);
					
				} else {
					this.$common.showTip(res.msg, 'none')
				}
			},
			// 上传进程
			onProcess(res) {
				console.log(res)
			},
			// 上传失败
			onError(err) {
				console.log(err)
			},
			// 移除
			onRemove(index) {
				this.fileList.splice(index, 1)
			},
			async save(){
				const that = this;
				// 获取插入的图片列表
				let imgs = await this.edit.getImages();
				const token = uni.getStorageSync('token');
				
				// 判断是否允许提交
				if (!this.edit.textCount && !imgs.length) {
					uni.showToast({
						title: '请录入内容'
					});
					return
				};
				return new Promise((resolve, reject) => {
					// 将所有未上传的本地图片上传到服务器并替换到编辑器
					this.edit.replaceImage(async(img)=>{
						// 已上传的无需再上传
						// 这里没有放到edit内部去过滤，因为我觉得需不需要上传得你自己决定
						// 比如插入的base64图片是否需要上传
						// img.indexOf('http') = 0说明这个图片已经是网络地址，无需替换就直接跳过
						if(img.indexOf('http') === 0) {return img;}
						
						// 上传并替换图片
						
						let {data} = await uni.uploadFile({
							url: config.baseUrl + '/api/upload/image', //仅为示例，非真实的接口地址
							filePath: img, //本地图片
							name: 'file',
							header: {
								token,
							},
						});
						var jsarr = JSON.parse(data);
						console.log(jsarr)
						return jsarr.data.uri;
						
						
					}).then(res=>{
						console.log('替换完成,最终内容为',res);
						that.form.content = res.html;
						resolve();
					}); 
				});
					
				
			},
			showT(){
				console.log(111)
				this.show = true
			},
			up() {
				this.$u.route({
					url: '/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'png',
					}
				})
			},
			remove(){
				this.videoUrl = '';
			},
			// 上传视频
			async upVideo() {
				const that = this;
				let url = config.baseUrl + '/api/upload/video';
				const token = uni.getStorageSync('token');
				uni.showLoading({
					mask:true,
					title: '上传中...'
				})
				// uploadFile 存储需要上传的文件
				let uploadFile = ''
				// 1.选择要上传的视频
				const res = await uni.chooseVideo({
					maxDuration: 60,		// 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['album'],		// album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
				});
				uploadFile = res.tempFilePath;
				// 2.上传所选视频到服务器
				const data = await uni.uploadFile({
					url,
					filePath: uploadFile,
					name: 'file',
					header: {
						token,
					},
				});
				console.log('data:', data);
				var jsarr = JSON.parse(data.data);
				console.log(jsarr)
				if(jsarr.code != 1){
					that.$common.showTip(jsarr.msg,'none');
					uni.hideLoading();
					return
				};
				uni.hideLoading();
				that.videoUrl = jsarr.data.uri;
				
			},
			// 演示----按钮组件点击事件
			onTabClick({name,index}) {
			},
			toUrl(url){
				uni.navigateTo({
					url
				})
			},
			previewImg(){
				const that = this;
				uni.previewImage({
					urls:[that.form.image],
					current:that.form.image
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.p1{
		display: inline-block;
		width: 150rpx;
		text-align: center;
		margin-right: 10rpx;
	}
	.p2{
		margin-left: 10rpx;
	}
	.tips-tit{
		font-size: 28rpx;
		color: #666;
	}
	.bgf{
		padding: 30rpx;
		::v-deep .edit-btns{
			position: relative;
			top: 0;
			.suffix{
				position: absolute;
			}
		}
		
	}
	
	.face{
		border-radius: 10rpx;
		width: 160rpx;
		height: 160rpx;
	}
	.genhuan{
		width: 90%;
		margin: 0 5%;
		margin-top:20rpx;
		.msg2{
			.box{
				display: inline-block;
				position: relative;
				.icon{
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
			.img{
				width: 218rpx;
				height: 218rpx;
				border-radius: 12rpx;
			}
			.img1{
				width: 218rpx;
				height: 218rpx;
				margin-left:11rpx ;
				border-radius: 12rpx;
			}
		}
		.msg{
			// margin-top:20rpx ;
			// margin: 0 5%;
			textarea{
				width: 90%;
				padding: 20rpx 5%;
				background: #f6f6f6;
				border-radius: 12rpx;
				font-size: 28rpx;
				height: 200rpx;
			}
		}
		.title{
			padding: 30rpx 0;
			margin: 0;
			.bitian{
				font-size: 24rpx;
				color: #f94341;
				font-weight: 600;
				margin-left:10rpx;
			}
			.txtbox{
				font-size: 36rpx;
				font-weight: 900;
				display: inline-block;
				position: relative;
				text{
					position: relative;
					z-index: 2;
				}
				view{
					width: 100%;
					height: 20rpx;
					background: #d8e5f7;
					border-radius: 20rpx;
					position: absolute;
					bottom: 0;
				}
			}
		}
	}
	.btn{
		width: 90%;
		margin: 0 5%;
		margin-top: 100rpx;
		border-radius: 16rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		background-image: linear-gradient(to right, #4764c2 , #0367ff);
	}
	.ct{
		padding: 30rpx;
	}
	.video-box{
		position: relative;
		.icon-close{
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			width: 48upx;
			height: 48upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}
	}
	
	.tips{
		margin: 0 5%;
		color: #999;
		text-align: left;
		padding-bottom: 30rpx;
		view{
			margin-bottom: 16rpx;
		}
	}
	.gray{
		font-size: 26rpx;
		color: #999;
	}
</style>
